<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn Vue</title>
</head>
<body>

  <!-- 在 ide、编辑器 添加语法糖快捷键， vue=`...下面body内的代码...` -->
  <div id="app">
    <!-- 伪代码 -->
    <!-- <h2 :style="{key(属性名/color): value(属性值/red)}">{{message}}</h2> -->

    <!-- 
      :style
      注意： 推荐用第二种
        font-size: - vue会分割前后，如果style没有找到key,就看成 变量
        50px: vue不认识，就看成变量 
        --------
        value(变量、字符串、数字) 一定要用 ’(单引号),括起来，不论是 red、50px....
              除外： 数字
    -->
    <!-- <h2 :style="{font-size: '50px'}">{{message}}</h2> -->

    <h2 :style="{'font-size': '50px'}">{{message}}</h2>

    <h2 :style="{fontSize: '50px'}">{{message}}</h2>

    <h2 :style="{fontSize: '50px', backgroundColor: 'red', height: 1}">{{message}}</h2>

    <h2 :style="{fontSize: '50px', color: abc}">{{message}} 加变量</h2>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        abc: 'blue',
      },
    })
  </script>
</body>
</html>